<template >
  <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
    @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { reactive } from 'vue'
import http from '../http'
import { useRoute, useRouter } from 'vue-router'

interface FormState {
  username: string;
  password: string;
}

const formState = reactive<FormState>({
  username: '',
  password: ''
})
const { query } = useRoute()
const router = useRouter()
const onFinish = (values: any) => {
  http.post('/api/login', values).then(res => {
    if (res.data.code === 200) {
      message.success('登录成功')
      localStorage.setItem('token', res.data.token)
      router.replace(query.redirectUrl as string || '/home')
    } else {
      message.error('登录失败')
    }
  })
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
</script>
<style lang="scss"></style>
